#크롬 하위버전 SyntaxError - Invalid regular expression 에러 해결하기

📅 2024. 04. 12

#문제

• Sentry에서 SyntaxError: Invalid regular expression 에러 확인됨
• 크롬 하위버전에서 에러 발생하여 화면이 렌더링되지 않는 문제로 확인

#대상

• Chrome < 69
• Zod
  • >= 3.21.0
  • < 3.22.4

#트러블슈팅

• Sentry에 보고된 Chromium 65 버전을 저장소를 통해 다운로드 후, 직접 해당 URL로 접근한 결과 원인을 찾을 수 있었음
• 원인 코드는 다음과 같음

const emojiRegex = /^(\p{Extended_Pictographic}|\p{Emoji_Component})+$/u;

• JavaScript는 정규식 표현에 유니코드를 사용하여 원하는 문자열들을 쉽게 구분할 수 있는 기능을 지원함
  • 참고: MDN, unicode character class escape
• 유니코드 중 Extended_Pictographic(ECMAScript 스펙)은 크롬 69 버전부터 지원
  • Extended_Pictographic은 기술적으로는 이모지가 아닌 "픽토그래픽" 문자열을 포함하는 이모지
  • ex: "1😂💯♡⌨︎"에서 '😂', '💯' 뿐만 아니라 '♡'와 '⌨︎'까지 모두 포함
• 정확한 문제 발생 버전 확인을 위해 65 ~ 70 버전을 다운받은 뒤 실행해보니 69 버전부터는 코드가 정상 동작하는 것을 확인

#해결책

• zod 버전을 v3.22.4로 업그레이드
  • 해결 커밋: Lazy emojiRegex
• 3.22.4부터는 emoji 관련 정규식을 z.string().emoji()를 사용하는 경우에만 사용함
• 주의사항: 만약 z.string().emoji()를 사용하는 스키마가 있다면, 여전히 하위 버전에서 에러가 발생할 수 있음. 필요한 경우, z.string().regex()를 통해 직접 정규식을 구현하는 방법을 권장함

#링크

• Github Issue, Invalid emoji regular expression
• Chromium 이전 버전 다운로드 링크, https://raw.githubusercontent.com/Bugazelle/chromium-all-old-stable-versions/master/chromium.stable.json